<template>
  <div class="ranking">
    <!-- <h1>排行榜</h1> -->
    <loading v-if="rankList.length==0"></loading>
    <ul>
      <ranking-list
        v-for="(rank, index) in rankList"
        :key="rank[index]"
        :rank="rank"
        path="/playlist"
      ></ranking-list>
    </ul>
    <list-title>排行小区</list-title>
    <ul class="ranklistSec">
      <ranking-listsec
        v-for="(rank, index) in ranklistSec"
        :key="rank[index]"
        :rank="rank"
        path="/playlist"
      ></ranking-listsec>
    </ul>
      
  </div>
</template>
<script>
import RankingList from "@/components/RankingList.vue"; //排行列表
import RankingListsec from "@/components/RankingListsec.vue"; 
import ListTitle from "@/components/ListTitle.vue"

export default {
 
  data() {
    return {
      rankList: [], //排行数据
      ranklistSec:[], //排行数据2 
    };
  },
  created() {
    this.$axios.get("/toplist/detail").then((result) => {
      // console.log("请求结果", result); //result=>数组 v-for后 song=>对象
      // this.rankList = result.list;
      let arrFirst=result.list.slice(0,4);
      this.rankList = arrFirst;
      let arrSec=result.list.slice(4);
      this.ranklistSec=arrSec;
      
      // console.log("rankList",arrSec);
      
    });
  },
  components: {
    RankingList, 
    RankingListsec,
    ListTitle
  },
};
</script>
<style lang="less" scoped>
.ranklistSec{
  display: flex;
  flex-wrap: wrap;
}
</style>
